<template>
	<z-nav-bar title="我的高尔夫生涯" transparentTitle="auto"></z-nav-bar>
	<view class="flex_sbc flex_wrap uni-mx-60">
		<view v-for="(data, index) in dataList" :key="data.icon" class="item">
			<image :src="`${setting.oss_pub_domain}/app-img/my/achievement-icon-${data.icon}.png`" class="img" :style="{filter: `grayscale(${data.reached ? 0 : 100}%)`}"></image>
			<view class="text-w">{{ data.dictLabel }}</view>
			<view class="desc">{{ data.remark }}</view>
			<view v-if="data.button" class="button" @click="movement(index)">{{ data.button }}</view>
		</view>
		<view style="visibility: hidden;width: 184rpx;height: 0;"></view>
		<view style="visibility: hidden;width: 184rpx;height: 0;"></view>
	</view>
	<uni-popup ref="get" type="center">
		<view class="popup-box">
			<image :src="setting.oss_pub_domain + '/app-img/my/get-bg.png'" class="gb"></image>
			<image :src="setting.oss_pub_domain + '/app-img/my/achievement-icon-1.png'" class="badge"></image>
			<image :src="setting.oss_pub_domain + '/app-img/my/pop-title.png'" class="title"></image>
			<view class="text-desc">
				<view>恭喜获得</view>
				<view>高尔夫达人成就</view>
			</view>
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon-close-white.png'" class="close" @click="get.close()"></image>
		</view>
	</uni-popup>
</template>

<script setup>
import { getAchievementList } from "@/api/user.js"
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance()

const dataList = ref([])
getAchievementList().then(res => {
	const icons = ['1', '4', '7', '2', '5', '8', '3', '6']
	const butsText = ['前往创建', '前往添加', '前往解决', '前往解决', '前往创建', '前往创建', '前往创建']
	res.forEach((item, index) => {
		item.icon = icons[index]
		item.button = butsText[index]
	})
	dataList.value = res
	console.log(res);
})


const get = ref('')
// onMounted(() => {
// 	get.value.open()
// })

function movement(index) {
	uni.removeStorageSync('player-profile')
	if ([0, 2, 3, 6].includes(index)) {
		uni.navigateTo({
			url: '/pages/question/index?all=1'
		})
	} else if ([1, 4].includes(index)) {
		uni.navigateTo({
			url: '/pages/player/add/add'
		})
	} else if (index === 5) {
		uni.switchTab({
			url: '/pages/tabbar-page/tabbar-3'
		})
	}
}

</script>

<style lang="scss">
	page {
		background: url($oss_pub_domain + '/app-img/my/achievement-bg.png') no-repeat;
		background-size: 100%;
		padding-top: 18vh;
	}
</style>
<style lang="scss" scoped>
	.item {
		width: 184rpx;
		height: 338rpx;
		text-align: center;
		margin-bottom: 56rpx;
		.img {
			width: 184rpx;
			height: 184rpx;
		}
		.desc {
			width: 152rpx;
			text-align: center;
			font-size: 20rpx;
			color: $uni-text-color-grey;
			margin: 8rpx auto 0;
			height: 48rpx;
		}
		.button {
			width: 124rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 16rpx;
			border: 2rpx solid $uni-text-color-main;
			color: $uni-text-color-main;
			font-size: 24rpx;
			margin: 10rpx auto 0;
		}
	}

	.popup-box {
		width: 540rpx;
		height: 738rpx;
		position: relative;
		.gb {
			width: 540rpx;
			height: 538rpx;
		}
		.badge {
			width: 368rpx;
			height: 368rpx;
			position: absolute;
			left: 86rpx;
			top: 120rpx;
		}
		.title {
			width: 404rpx;
			height: 142rpx;
			position: absolute;
			left: 72rpx;
			top: 376rpx;
		}
		.text-desc {
			position: absolute;
			top: 510rpx;
			text-align: center;
			width: 100%;
			font-weight: 700;
			color: $uni-white;
		}
		.close {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			top: 674rpx;
			left: 238rpx;
		}
	}
</style>
